<template>
  <div>
    <span>获取验证码({{time}}s)</span>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
// 接收父组件传过来的flag
let props = defineProps(['flag'])
let $emit = defineEmits(['getFlag'])

let time = ref(5)


// 监听flag数据的变化
watch(()=>props.flag,()=>{
  let timer = setInterval(() => {
    time.value--;
    if(time.value==0){
      // 通知父组件倒计时结束
      $emit('getFlag',true)
      // 清除定时器
      clearInterval(timer);
    }
  }, 1000);
},{immediate:true})
</script>

<style scoped>

</style>